@charset "utf-8";
.login{
  height: 100vh;
  .header{
    width:100%;
    height: 303px;
    position: relative;
    .avatar{
      position: absolute;
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%);
      img{
        display: inline-block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
      p{
        text-align: center;
        line-height: 39px;
        //color: #FFFFFF;
        margin-top: 10px;
      }
    }
  }
  .main{
    .telephone{
      width: 600px;
      margin: auto;
      line-height: 80px;
      margin-bottom: 20px;
      border:1px solid gainsboro;
      .img{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 84px;
        background-color: #f3f4f6;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      input{
        display: inline-block;
        vertical-align: middle;
        width: 330px;
        margin-left: 20px;
      }
    }
    .password{
      width: 600px;
      margin: auto;
      line-height: 80px;
      border:1px solid gainsboro;
      .img{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 84px;
        background-color: #f3f4f6;
        text-align: center;
        img{
          display: inline-block;
        }
      }
      input{
        display: inline-block;
        vertical-align: middle;
        width: 330px;
        margin-left: 20px;
      }
    }
  }
  .add-button{
    width: 600px;
    margin:40px auto;
    background-color: #ff0036;
    color: #FFFFFF;
    padding:20px 0;
    text-align: center;
    font-size: 26px;
  }
  .registered-button{
    width: 600px;
    margin:auto;
    text-align: center;
    font-size: 26px;
  }
}